<template>
  <div>
    <el-page-header content="添加业主账户" icon="" title="业主管理" />
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="userFormRules"
      label-width="80px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" type="password" />
      </el-form-item>

      <el-form-item label="业主姓名" prop="propname">
        <el-input v-model="userForm.propname" />
      </el-form-item>

     

      <el-form-item label="楼号" prop="building">
        <el-select
          v-model="userForm.building"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房号" prop="roomnumber">
        <el-select
          v-model="userForm.roomnumber"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted, } from "vue";
const proplist = ref([]);
import axios from "axios"
// import router from "@/router";
import {useRouter} from "vue-router"

onMounted(async () => {
  var res = await axios.get("/adminapi/prop/list");
  console.log(res.data.data)
  proplist.value = res.data.data;
});

console.log(proplist.value)

const userFormRef = ref();
const userForm = reactive({
  username: "",
  password: "",
  propname:"",
  building:1,
  roomnumber:101,
});

const userFormRules = reactive({
  username: [{ required: true, message: "请输入名字", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  propname: [{ required: true, message: "请输入业主名字", trigger: "blur" }],
  building: [{ required: true, message: "请选择楼号", trigger: "blur" }],
  roomnumber: [{ required: true, message: "请选择房号", trigger: "blur" }],
});

//下拉选项
const options1 = [
  {
    label: "1#",
    value: 1,
  },
  {
    label: "2#",
    value: 2,
  },
  {
    label: "3#",
    value: 3,
  },
];

const options2 = [
  {
    label: "101",
    value: 101,
  },
  {
    label: "102",
    value: 102,
  },
  {
    label: "201",
    value: 201,
  },
  {
    label: "202",
    value: 202,
  },
  {
    label: "301",
    value: 301,
  },
  {
    label: "302",
    value: 302,
  },
  {
    label: "401",
    value: 401,
  },
  {
    label: "402",
    value: 402,
  },
]


const router = useRouter()
//更新提交
const submitForm = ()=>{
        userFormRef.value.validate(async(valid)=>{
            if(valid){
              await axios.post("/adminapi/prop/addaccount",userForm);
              router.push(`/proprietor-manage/accountlist`) //路由跳转页面
            }
        })
    }
</script>

<style scoped lang="scss">
.demo-ruleForm {
  margin-top: 50px;
}
.el-row {
  margin-top: 20px;
  .box-card {
    text-align: center;
  }
}
</style>
